<#assign ctx=request.contextPath>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>添加角色</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="${ctx}/static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${ctx}/static/css/font-awesome.min.css" />
    <link rel="stylesheet" href="${ctx}/static/datacenter/css/font-awesome.min.css" />
    <link href="${ctx}/static/datacenter/css/animate.css" rel="stylesheet">
    <link href="${ctx}/static/datacenter/css/style.css" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="roleForm">
                        <input type="hidden" id="id" name="id" value="">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">模板名字</label>
                            <div class="col-sm-8">
                                <input id="tepName" name="tepName" class="form-control" type="text" value="" />
                            </div>
                        </div>
                        <div class="form-group">
                             <label class="col-sm-3 control-label">是否开启店铺填写：</label>
                            <div class="col-sm-8">
                                <select name="whetherShopNameSwitch" class="form-control">
                                    <option value="0" selected="selected">否</option>
                                    <option value="1" >是</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">是否开启淘宝号编辑：</label>
                            <div class="col-sm-8">
                                <select name="whetherTaobaoIdSwithc" class="form-control">
                                    <option value="0" selected="selected">否</option>
                                    <option value="1" >是</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">背景图添加（默认是背景色无图片）：</label>
                            <div class="col-sm-8">
                                <input type="file" id="file"  accept="image/*"/>
                                <img src="" id="img" style="width: 4em;height: 5em"/>
                                <input type="text" id="bgImg" name="bgImg" value="" class="hide"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button class="btn btn-primary" type="submit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- 全局js -->
    <#include "/common.ftl">
<script type="text/javascript">
    $(document).ready(function () {

        $("#roleForm").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 4,
                    maxlength: 10
                },
                remarks: {
                    required: false,
                    maxlength: 40
                }
            },
            messages: {},
            submitHandler:function(form){
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "${ctx}/web/temp/add",
                    data: $(form).serialize(),
                    success: function(msg){
                        layer.msg(msg.message, {time: 2000},function(){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index);
                        });
                    }
                });
            }
        });

    });

    $(function(){

        $("#file").change(function(){
          //  var filePath = $("#file").val();
            var imgObj =$("#file")[0].files[0];
            //将formData传给后台
            var formData=new FormData();
            formData.append("file",imgObj);

            //ajax请求后台,将请求的数据调用fileUp接口并且填写上传的服务器地址savePath projectUrl
            $.ajax({
                url: " ${projectUrl}/img/fileUp.action",
                type: "POST",
                data: formData,
                dataType:"json",
                /** *必须false才会自动加上正确的Content-Type */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    if(data.state == 200){
                        console.log("data "+JSON.stringify(data));
                        $("#img").attr("src",data.url);
                        $("#bgImg").val(data.url);
                    }
                },
                error: function () {
                    alert("上传失败！");
                }
            });

        });
    });
</script>

</body>

</html>
